<template>
  <div class="progress-container">
    <!-- 环形进度条容器 -->
    <div
        class="progress-ring"
        :style="ringStyle"
    >
      <!-- 中间文字 -->
      <div class="progress-text">{{ progress }}%</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CircleProgress',
  props: {
    // 进度值（0-100）
    progress: {
      type: Number,
      required: true,
      // 校验进度值范围
      validator: (value) => {
        return value >= 0 && value <= 100;
      }
    },
    // 进度条颜色（可选）
    progressColor: {
      type: String,
      default: '#2f97e0'
    },
    // 剩余部分颜色（可选）
    remainingColor: {
      type: String,
      default: '#f0f7fc'
    },
    // 圆环大小（可选）
    size: {
      type: Number,
      default: 120 // 直径默认120px
    },
    // 圆环厚度（可选）
    thickness: {
      type: Number,
      default: 15 // 厚度默认15px
    }
  },
  computed: {
    // 计算环形进度条样式
    ringStyle() {
      const innerSize = this.size - this.thickness * 2;
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        // 动态生成锥形渐变
        background: `conic-gradient(
          ${this.progressColor} ${this.progress}%,
          ${this.remainingColor} 0%
        )`,
        // 中间白色圆的尺寸（通过伪元素样式动态计算）
        '--inner-size': `${innerSize}px`
      };
    }
  }
};
</script>

<style scoped>
.progress-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.progress-ring {
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 中间白色圆环 */
.progress-ring::after {
  content: "";
  position: absolute;
  width: var(--inner-size);
  height: var(--inner-size);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

/* 进度文字 */
.progress-text {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: bold;
  color: #666;
}
</style>
